<template>
  <div class="flex app-container justify-center items-center">
    <div class="rounded-lg shadow-lg bg-white" style="width: 400px">
      <p class="text-center mt-4">
        <span class="text-lg text-gray-700">常德市规划展示馆IMS</span>
      </p>
      <div class="p-8 pb-0">
        <el-form ref="formRef" :model="form" :rules="rules">
          <el-form-item prop="account">
            <el-input
              v-model="form.account"
              size="large"
              prefix-icon="User"
              placeholder="账号"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              type="password"
              size="large"
              prefix-icon="Lock"
              placeholder="密码"
            />
          </el-form-item>
        </el-form>
        <el-checkbox>记住密码</el-checkbox>
      </div>
      <div class="p-8 pt-4">
        <el-button type="primary" size="large" class="w-full" @click="login">
          登录
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { toRefs, reactive, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { login as Login } from "@/api/login.js";

const { proxy } = getCurrentInstance();
const router = useRouter();

const data = reactive({
  form: {},
  rules: {
    account: [{ required: true, message: "请输入你的账号", trigger: "blur" }],
    password: [{ required: true, message: "请输入你的密码", trigger: "blur" }],
  },
});
const { form, rules } = toRefs(data);

function login() {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      Login({ ...form.value, verifycode: "4396" }).then((res) => {
        proxy.$modal.msgSuccess("登录成功");
        router.push("/index");
      });
    }
  });
}
</script>

<style scoped>
.app-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("/public/bg1.jpg");
  background-size: cover;
}
</style>
